import { defineComponent, Ref, ref } from "vue";
import MonacoEditor from "./components/MonacoEditor";
import { css } from "@emotion/css";
const schema = {
  type: "string",
};

const styles = {
  editor: css({
    minHeight: "400px",
  }),
};

function toJson(data: any) {
  return JSON.stringify(data, null, 2);
}

export default defineComponent({
  setup(props, ctx) {
    const schemaRef: Ref<any> = ref(schema);
    const handleCodeChange = (code: string) => {
      let schema: any;
      console.log(code);

      try {
        schema = JSON.parse(code);
      } catch (e) {
        console.log(e);
      }
      schemaRef.value = schema;
    };
    return () => {
      const code = toJson(schemaRef.value);
      return (
        <div>
          <MonacoEditor
            code={code}
            onChange={handleCodeChange}
            title="Schema"
            class={styles.editor}
          />
        </div>
      );
    };
  },
});
